.segmented-style .el-segmented {
  --el-segmented-bg-color: var(--el-bg-color);
  //--el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: var(--el-color-primary-light-3);
  --el-border-radius-base: 16px;
}

.template-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-main{
  padding-top: 0;
  padding-bottom: 10px;
}

.quick-setting {
  height: 32px;
  background-color: var(--el-bg-color);
  border-radius: 6px;
  border: 1px solid var(--ant-broder-color);
  display: flex;

  .quick-setting-item {
    display: inline-block;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
  }

  .quick-setting-item:hover {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }

  .close-item:hover {
    background-color: var(--el-color-danger-light-9);
  }

  .success-item:hover {
    background-color: var(--el-color-success-light-9);
  }
;
  align-items: center;
  padding: 0 10px;
  line-height: 14px;
  gap: 0px 16px;
}

.template-input {
  border: 1px solid var(--brder-color);;
  margin: 0 0.75rem;
  box-sizing: border-box;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: "tnum";
  width: 100%;
  padding: 6px 11px 4px;
  border-radius: 6px;
  transition: 0.3s;
}

/* 当鼠标悬停在输入框上时，显示虚线边框 */
.template-input:hover {
  border: 1px dashed var(--el-color-primary-light-5);
  transition: 0.3s;
  box-sizing: border-box;
  outline: 0;
  border-radius: 6px;
}

/* 当输入框获得焦点时，显示实线边框 */
.template-input:focus {
  border: 1px solid var(--el-color-primary-light-5);
  outline: 0;
  border-radius: 6px;
}

.template-input-title {
  width: 10%;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
  line-height: 24px;

  .el-select {
    width: 130px;
  }
}


.form-textarea {
  resize: none;
}

.form-answer {
  font-size: 12px;
  width: 10%;
  color: var(--el-color-primary);
}

/*表单标题样式*/
.template-title {
  font-size: 20px;

  input {
    font-size: 18px;
    width: 80%;
  }

  .score {
    font-size: 14px;
    color: rgba(164, 169, 176, 0.99);
  }
}

/*表单题干说明样式*/
.template-description {
  font-size: 14px;

  input {
    font-size: 14px;
    margin: 5px 20px;
    width: 90%;
  }

  input::placeholder {
    padding-left: 50px;
    color: #97a8be;
    font-size: 12px;
    font-style: italic;
  }

  .score {
    font-size: 14px;
    color: rgba(164, 169, 176, 0.99);
  }
}

/*表单选择器样式*/
.form-select {
  width: 70%;
  margin-left: 30px;
}

.ghost {
}

/*容器布局样式*/
.app-wrapper {
  position: relative;
  height: calc(100vh);
  width: 100%;
}

.drawer-shadow {
  background-color: #ffffff;
  margin: 0;
}

.question-edit {
  border-color: #aab2bd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*鼠标经过题目时的样式*/
.hover-style {
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;
  transition-duration: .3s;
  z-index: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); // 修改: 调整鼠标经过时的阴影效果
  background-color: #ffffff;
  width: 102%;
  margin-left: -1%;
}

.clicked-style {
  border-radius: 3px;
  position: relative;
  box-sizing: border-box;
  transition-duration: .3s;
  z-index: 1;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); // 修改: 调整点击时的阴影效果
  background-color: #ffffff;
  width: 102%;
  margin-left: -1%;
}

.drawer-left-menu {
  width: 15% !important;
  background-color: #ffffff;
  margin: 0;
}

.question-type {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.question-type-item {
  flex: 0 0 calc(50% - 5px); /* 关键样式：占满容器宽度的一半减去间隙 */
  box-sizing: border-box; /* 确保边框和padding不额外增加宽度 */
  border: 1px solid var(--brder-color);
  text-align: center;
  border-radius: 6px;
  padding: 2px 6px;
  background: #f5f6fa;
}

.question-type-item:hover {
  border: 1px solid var(--el-color-primary);
  color: var(--el-color-primary);
  border-radius: 6px;
}

.right-tool-bar {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  border-radius: 6px;
  border: 1px solid var(--ant-broder-color);
  //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  right: -40px;

  padding: 6px 2px;
  transition-duration: .3s;
  z-index: 1;
  box-shadow: 0 4px 16px #00000012;
  gap: 8px;
}

.synopsis {
  display: flex;
  justify-content: center;
  flex-direction: row;

  .outline-icon {
    width: 10%;
    margin-right: 4px;
  }

  .outline-num {
    width: 15%;
  }
}

.synopsis:hover {
  color: var(--el-color-primary);
}

.total-hint {
  margin-bottom: 10px;
  font-weight: 500;
}
